<template>
    <div class="j-btns">
        <div class="j-btn c-title-5" v-for="(item, i) in list" :key="i" @click="onChoose(item)" :class="{ choose: item == modelValue }" v-html="item.label || item"></div>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
interface List {
    label: string;
    value: string;
}

const props = defineProps({
    list: Array<List | any>,
    modelValue: {
        type: [Object, String]
    }
});

const emit = defineEmits(["update:modelValue", "change"]);
const innerValue = ref(props.modelValue);

watch(
    () => innerValue.value,
    newValue => {
        emit("update:modelValue", newValue);
    }
);

const onChoose = (item: any) => {
    innerValue.value = item;
    console.log(item,"ititititi");
    
    emit("change", item);
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
